<template>
  <ElTabs tab-position="top" style="height: 450px" class="property-grid-tabs">
    <ElTabPane label="property">
      <div style="height: 400px; padding-right: 10px; overflow: auto">
        <ElForm :model="formData" :label-width="100">
          <ElFormItem v-for="(schema, index) in propSchema" :key="index" :prop="schema.field" :label="schema.label">
            <template v-if="!schema.component || schema.component == 'Input'">
              <ElInput v-if="schema?.componentProps?.type == 'textarea'" :readonly="schema?.componentProps?.readonly" @click="handleShowEdit(schema.field)" :disabled="schema?.componentProps?.disabled" :type="'text'" :rows="schema?.componentProps?.rows || 1" v-model="formData[schema.field]" />
              <ElInput v-if="schema?.componentProps?.type != 'textarea'" :disabled="schema?.componentProps?.disabled" v-model="formData[schema.field]" />
            </template>
            <ElSelect v-if="schema.component == 'Select'" v-model="formData[schema.field]">
              <template v-if="schema.componentProps">
                <ElOption v-for="option in schema.componentProps.options" :key="option.label" :label="option.label" :value="option.value" />
              </template>
            </ElSelect>
            <ElSwitch v-if="schema.component == 'Switch'" v-model="formData[schema.field]" />
            <ElInputNumber v-if="schema.component == 'InputNumber'" v-model="formData[schema.field]" />
          </ElFormItem>
        </ElForm>
      </div>
    </ElTabPane>
    <!-- <ElTabPane v-if="propSchema.event" label="event">
        <Form :schema="propSchema.event" />
      </ElTabPane>
      <ElTabPane v-if="propSchema.style" label="style">
        <Form :schema="propSchema.style" />
      </ElTabPane> -->

    <Dialog v-model="dialogVisible" title="编辑值">
      <ElInput type="textarea" v-model="editValue" rows="10" />
      <div style="height: 130px; overflow: auto">
        <b>参数说明：</b><br />
        <ElTag type="success">VUECustom: { h, ElTag, ElInput, data }</ElTag><br />
        <b style="font-size: 12px">data参数说明：</b><br />
        <span style="font-size: 12px">* table中使用：</span><ElTag>data: {column: {table列属性对象}, cellIndex: 单元格索引, row: {对应表格行数据对象}}</ElTag><br />
        <span style="font-size: 12px">* detail中使用：</span><ElTag>data: 选中table的row数据</ElTag><br />
        <span style="font-size: 12px">* form中使用：</span><ElTag>data: 选中table的row数据 （仅对编辑界面有效）</ElTag><br />
        <b style="font-size: 12px">h函数说明：</b><br />
        <span style="font-size: 12px">* 除了类型必填以外，其他的参数都是可选的</span> <ElTag>h('div') h('div', { id: 'foo' })</ElTag> <br />
        <span style="font-size: 12px">* attribute 和 property 都能在 prop 中书写</span><br />
        <span style="font-size: 12px">* Vue 会自动将它们分配到正确的位置 </span><ElTag>h('div', { class: 'bar', innerHTML: 'hello' })</ElTag> <br />
        <span style="font-size: 12px">* 像 `.prop` 和 `.attr` 这样的的属性修饰符 // 可以分别通过 `.` 和 `^` 前缀来添加</span> <ElTag>h('div', { '.name': 'some-name', '^width': '100' })</ElTag> <br />
        <span style="font-size: 12px">* 类与样式可以像在模板中一样 // 用数组或对象的形式书写</span> <ElTag>h('div', { class: [foo, { bar }], style: { color: 'red' } })</ElTag> <br />
        <span style="font-size: 12px">* 事件监听器应以 onXxx 的形式书写</span> <ElTag>h('div', { onClick: () => {} })</ElTag> <br />
        <span style="font-size: 12px">* children 可以是一个字符串 </span><ElTag>h('div', {id: 'foo' }, 'hello')</ElTag> <br />
        <span style="font-size: 12px">* 没有 props 时可以省略不写</span> <ElTag>h('div', 'hello') h('div', [h('span', 'hello')])</ElTag> <br />
        <span style="font-size: 12px">* children 数组可以同时包含 vnodes 与字符串</span> <ElTag>h('div', ['hello', h('span', 'hello')])</ElTag><br />
        <span style="font-size: 12px">*以下为支持的ElementPlus标签对象</span><br />
        <ElTag type="success">ElTag</ElTag>&nbsp; <ElTag type="success">ElInput</ElTag><br />
        <b style="font-size: 12px">例子：</b><br />
        <ElTag>return VUECustom.h('span', {style: {color: 'red'}}, JSON.stringify(VUECustom.data.row))</ElTag><br />
        <div style=" padding: 10px; font-size: 12px; color: black;background-color: rgb(241 241 241)"
          >if (VUECustom.data.row.name.indexOf('TestCache') > -1) {<br />
          &nbsp;&nbsp;return VUECustom.h(VUECustom.ElInput, {<br />
          &nbsp;&nbsp;&nbsp;&nbsp;modelValue: VUECustom.data.row.name,<br />
          &nbsp;&nbsp;&nbsp;&nbsp;"onUpdate:modelValue": (val) => {<br />
          &nbsp;&nbsp;&nbsp;&nbsp;VUECustom.data.row.name = val<br />
          &nbsp;&nbsp;&nbsp;&nbsp;}<br />
          &nbsp;&nbsp;}, () => VUECustom.data.row.name)<br />
          }<br />
          return VUECustom.h(VUECustom.ElTag, {type: 'success'}, () => VUECustom.data.row.name)</div
        ><br />
      </div>
      <template #footer>
        <ElButton type="primary" @click="formSubmit">确定</ElButton>
        <ElButton @click="dialogVisible = false">关闭</ElButton>
      </template>
    </Dialog>
  </ElTabs>
</template>
<script lang="tsx">
import { ref, watch } from 'vue'
import { ElTag, ElTabs, ElTabPane, ElForm, ElFormItem, ElButton, ElInput, ElInputNumber, ElSelect, ElOption, ElSwitch } from 'element-plus'
import { getAllMetadata } from '../Metadata'
import { MetadataProperty } from '../types/Lowcode'
import { Dialog } from '@/components/Dialog'

export default {
  name: 'PropertyGrid',
  components: {
    ElTabs,
    ElTabPane,
    ElForm,
    ElFormItem,
    ElInput,
    ElInputNumber,
    ElSelect,
    ElOption,
    ElSwitch,
    Dialog,
    ElButton,
    ElTag
  },
  props: {
    modelValue: {
      type: Object,
      required: true,
      default: () => {}
    },
    columnProperty: {
      type: String,
      required: false,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  setup(props) {
    const allSchema = getAllMetadata()
    const propSchema = ref<MetadataProperty[]>([])

    const formData = ref(props.modelValue)

    watch(props, async (newProps) => {
      propSchema.value = JSON.parse(JSON.stringify(allSchema[newProps.columnProperty]))
      formData.value = newProps.modelValue
    })

    const editField = ref('')
    const editValue = ref('')
    const dialogVisible = ref(false)
    const handleShowEdit = (field) => {
      dialogVisible.value = true
      editField.value = field
      editValue.value = formData.value[field]
    }
    const formSubmit = () => {
      formData.value[editField.value] = editValue.value
      dialogVisible.value = false
    }
    return { propSchema, formData, dialogVisible, handleShowEdit, editValue, formSubmit }
  }
}
</script>
